<template>
	<view class="s-nav">
		<view class="status_bar"></view>
		<view :class="['nav-bar',{'nav-bar-no-back':!showBack}]">
			<view class="back" @click.stop="back()" v-if="showBack">
				<icon class="iconfont icon icon-back">&#xe812;</icon>
			</view>
			<view class="nav-search" @click.stop="search()" v-if="type==1">
				<icon class="iconfont icon icon-search">&#xe7e8;</icon>
				<text v-if="modelValue" class="v">{{modelValue}}</text>
				<text v-else>{{placeholder}}</text>
				<icon class="iconfont icon icon-clear" v-if="modelValue" @click.stop="clear()">&#xe733;</icon>
			</view>
			<view class="nav-search nav-search-title" v-else-if="type==0">
				<text>{{title}}</text>
			</view>
			<view class="nav-search nav-search-input" v-else>
				<template v-if="modelValue">
					<view class="tag" @click="tag()">
						<text>{{modelValue}}</text>
						<icon class="iconfont icon icon-close" @click.stop="clear()">&#xe733;</icon>
					</view>
				</template>
				<template v-else>
					<input class="input" maxlength="50" v-model="data.searchValue" type="text" :focus="true" :placeholder="placeholder">
					<button type="default" class="btn" hover-class="btnClickStyle" @click.stop="confirmSearch()">搜索</button>
				</template>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref, watch, computed, reactive } from 'vue';
	const emits = defineEmits(['update:modelValue', 'search', 'clear', 'back']);
	const data_props = defineProps({
		type: {
			type: [String, Number],
			default: 1
		},
		modelValue: {
			type: [String],
			default: ''
		},
		placeholder: {
			type: String,
			default: '关键词搜索'
		},
		showBack: {
			type: Boolean,
			default: true
		},
		back: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: ''
		}
	});
	const data = reactive({
		searchValue: ''
	});
	setTimeout(() => {
		data.searchValue = data_props.modelValue;
	});
	const statusBarHeight = computed(() => {
		return `${getApp().globalData.statusBarHeight}px`;
	});
	const navHeight = computed(() => {
		return `${getApp().globalData.navHeight}px`;
	});
	const navigationBarHeight = computed(() => {
		return `${getApp().globalData.navigationBarHeight}px`;
	});
	const capsuleHeight = computed(() => {
		return `${getApp().globalData.capsuleHeight}px`;
	});
	const borderRadius = computed(() => {
		return `${getApp().globalData.capsuleHeight/2}px`;
	});
	const borderRadius2 = computed(() => {
		return `${getApp().globalData.capsuleHeight*0.75/2}px`;
	});
	const inputHeight = computed(() => {
		return `${getApp().globalData.capsuleHeight*0.75}px`;
	});

	function clear() {
		emits('update:modelValue', '');
		emits('clear');
		data.searchValue = '';
	}

	function search() {
		emits('search');
	}

	function tag() {
		emits('update:modelValue', '');
	}

	function confirmSearch() {
		emits('update:modelValue', data.searchValue);
		emits('search', data.searchValue);
	}

	function back() {
		if (data_props.back) uni.navigateBack();
		else emits('back');
	}
</script>
<style scoped lang="scss">
	.status_bar {
		height: v-bind(statusBarHeight);
	}
	.s-nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;
		width: 750rpx;
		height: v-bind(navHeight);
		background-color: #fff;
		.nav-bar {
			display: flex;
			align-items: center;
			position: relative;
			height: v-bind(navigationBarHeight);
			&-no-back {
					padding: 0 30rpx;
					.nav-search {
						width: 480rpx !important;
					}
			}
			.back {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				height: 100%;
				.icon {
					font-size: 40rpx;
					color: #333;
				}
			}
			.nav-search {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 420rpx;
				padding: 0 32rpx;
				height: v-bind(capsuleHeight);
				border-radius: v-bind(borderRadius);
				background-color: #F5F5F5;
				.v {
					color: #333;
				}
				.icon-search {
					margin-right: 10rpx;
					font-size: 28rpx;
					color: #aaa;
				}
				text {
					flex: 1;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					font-size: 26rpx;
					color: #aaa;
				}
				.icon-clear {
					font-size: 26rpx;
					color: #aaa;
				}
				&-title {
					background-color: transparent;
					text-align: center;
					text {
						color: #000;
					}
				}
			}
			.nav-search-input {
				padding: 0 20rpx;
				.tag {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: v-bind(inputHeight);
					padding: 0 14rpx;
					border-radius: v-bind(borderRadius2);
					background: rgba(0, 0, 0, .5);
					text {
						max-width: 320rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 24rpx;
						color: #fff;
					}
					.icon {
						margin-left: 10rpx;
						font-size: 20rpx;
						color: #fff;
					}
				}
				.input {
					height: v-bind(inputHeight);
					font-size: 28rpx;
					color: #222;
				}
				.btn {
					width: 120rpx;
					height: v-bind(inputHeight);
					line-height: v-bind(inputHeight);
					padding: 0;
					border-radius: v-bind(borderRadius2);
					background-color: #E1835B;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
	}
</style>
